<template>
<view class="mask" v-show="isShow">
  <view :class="[isShow1?'show_in':'',isOut?'show_out':'','model']">
		<image class="img" :src="img" mode="widthFix"></image>
		<button type="default" @click="saveEwm">保存图片</button>
		<image v-show="isClost" @click="close"  class="img1" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/close.png" mode=""></image>
  </view>
</view>
</template>
<script>
export default {
  data(){
    return {
      isShow:false,
      isShow1:false,
      isOut:false,
			isClost:false,
			img:'',
			wxml:'',
			style:{}
    }
  },
	mounted(){

	},
  methods:{
		show(img){
			this.isClost=false
			setTimeout(()=>{
				this.isClost=true
			},700)
			this.isOut=false
			this.isShow=true
			this.img=img
			this.$nextTick(()=>{
				this.isShow1=true
			})
		},
		close(){
			console.log(1)
			this.isOut=true
			this.$nextTick(()=>{
				this.isShow=false
			})
		},
		saveEwm(){
			let that = this;
			console.log(1)
		  uni.downloadFile({
				url:that.img, //仅为示例，并非真实的资源
				success: (res) => {
					if (res.statusCode === 200) {
						let file = res.tempFilePath;
						that.save(file)
					}
				},
				fail:(err) =>{
					console.log(err)
				}
			});
		},
		save(url){
			let _this = this;
			uni.showLoading({ mask:true,
				title:'保存中...'
			})
			uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
							uni.hideLoading();
							uni.showToast({
								title:'图片已保存'
							})
					},
					fail: (err) => {
						uni.hideLoading();
						if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
							wx.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											console.log("settingdata", settingdata)
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												wx.showModal({
													title: '提示',
													content: '获取权限成功,再次点击图片即可保存',
													showCancel: false,
												})
											} else {
												wx.showModal({
													title: '提示',
													content: '获取权限失败，将无法保存到相册哦~',
													showCancel: false,
												})
											}
										},
										fail(failData) {
											console.log("failData", failData)
										},
										complete(finishData) {
											console.log("finishData", finishData)
										}
									})
								}
							})
						}
						// uni.hideLoading();
						// uni.showToast({
						// 	title:'保存失败',
						// 	icon:'none'
						// })
					},
					complete: () => {
					}
			});
		}
  }
}
</script>
<style lang="scss" scoped>
.mask { backdrop-filter: blur(6px);position: fixed; z-index: 2000; height: 100%; width: 100%; top: 0; text-align: center;}
.mask::before { content: ""; position: absolute; background: rgba(0,0,0,.6); filter: blur(5px); height: 100%; width: 100%; top: 0; left: 0;}
.mask{
  &::v-deep .ivu-form-inline .ivu-form-item{
    margin-right: 0;
    width: 240px;
  }
}
.sq_img{
	width: 100%;
}
.sq_c{
	color: #ccc;
	width: 90%;
	margin-left: 5%;
	margin-top:20px;
	text-align: center;
	font-size: 14px;
}
.flex_l{
	position: absolute;
	top: 50px;
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 24px;
	color: #fff;
	image{
		width: 32px;
		height: 32px;
		margin-top: 1px;
		margin-right: 10px;
	}
}
.model{
  position: absolute;;
  width: 80%;
  // height: 310px;
  height: 80%;
  left: 10%;
  top: calc(5% + 20px);
  background: rgba($color: #000000, $alpha: 0);
  opacity: 0;
  visibility: hidden;
  z-index: 99999 !important;		
	border-radius: 8px;
	overflow-y: auto;
	// overflow: hidden;	
	.img{
		margin: -5px 0;
		width: 100%;
		background-color: #fff;
	}
	.img1{
		position: fixed;
		width: 100%;
		right: calc(10% - 16px);
		top: calc(5% + 4px);
		width: 32px;
		height: 32px;
		// left: calc(50% - 16px);
	}
}
.sq_btn{
	width:80%;
	position: relative;
	left: 10%;
	margin: 14px 0;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background-color: #f93;
	color: #fff;
	font-size: 16px;
}
.btn_1{
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
	color: #044183;
}
.show_in{
    animation: go_in 0.5s;
    // animation-fill-mode: forwards;
    opacity: 1;
    visibility: visible;
    z-index: 10001;
}
 @keyframes go_in
  {
     0% {opacity: 0; transform: scale(0.5);}
     100%{opacity: 1; transform: scale(1);}

  }
  .show_out{
    animation: go_out 0.3s;
    // animation-fill-mode: forwards;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
@keyframes go_out
  {
     0% {opacity: 1; transform: scale(1);visibility: visible;}
     100%{opacity: 0; transform: scale(0.8);}

  }
</style>